<template>
  <!-- 头条新闻 -->
  <div class="zhu">
    <!-- 图片 -->
    <div class="zhu-img">
      <img src="/img/content1img1.2f141596.png" />
    </div>
    <!-- 滚动字条 -->
    <div class="zhu-title" ref="zhu-title">
      <p v-for="it in toutiaoxinwenDate" :key="it.id" :class="it.className">
        {{ it.title }}
      </p>
    </div>
  </div>
</template>
<script setup>
import { getCurrentInstance, onMounted } from "vue";
const toutiaoxinwenDate = [
  {
    id: 0,
    title: "无需高分上大学，改变自己从这里开始",
    className: "zhu-title-start",
  },
  {
    id: 1,
    title: "奥里给，干了兄弟们,哈哈哈哈哈哈哈!",
    className: "zhu-title-end",
  },
  {
    id: 2,
    title: "无需高分上大学，改变自己从这里开始",
    className: "zhu-title-start",
  },
];
onMounted((v) => {
  const { refs } = getCurrentInstance();
  const ZhuTitle = refs["zhu-title"];
  // 滚动的位置
  var y = 0;
  // 滚动的 函数
  const RollFun = function () {
    if (y >= ZhuTitle.offsetHeight * 2) {
      y = 0;
    } else {
      y += 1;
    }
    setTimeout(RollFun, 30);
    ZhuTitle.style.transform = "translateY(" + -y + "px)";
  };
  RollFun();
});
</script>
<style scoped>
.zhu {
  width: 100%;
  height: 1.4rem;
  overflow: hidden;
}
.zhu-img {
  width: 4rem;
  height: 100%;
  float: left;
}
.zhu-img img {
  width: 100%;
  height: 100%;
}
.zhu-title {
  width: 10.5rem;
  height: 100%;
  float: right;
}
.zhu-title p {
  width: 100%;
  height: 100%;
  background-color: #fff;
  color: #000;
  font-size: 0.6rem;
  color: #999;
  padding-left: 0.2rem;
  box-sizing: border-box;
  line-height: 1.6rem;
}
</style>